<template>
    <!-- pages/myPoints/myPoints.wxml -->
    <view class="my-page" :class="uiStyle == 1 ? '' : 'uiStyle'">
       <view class="head-block">
            <image src="../../static/assets/img/my/jifenBG.png" class="bgimg" mode="widthFix"></image>
            <view class="nav-title"  v-if="weixin == 2" :style="'top:' + (statusBarHeight + 10) + 'px'"></view>
        </view>
        <!-- 返回 -->
       <view class="icon" v-if="weixin == 2" @tap="goMy" :style="'top:' + (statusBarHeight + 12) + 'px'">
            <van-icon name="arrow-left" color="#fff" size="45rpx" />
        </view>
        <!-- 积分信息 -->
        <view class="my-points">
            <image src="../../static/assets/img/my/jifen-card.png" class="jfimg" mode="widthFix"></image>
            <view class="my-points-userInfo">
                <view class="my-points-userInfo-name">
                    {{ userName }}
                    <!-- <text class="userType">({{userType}})</text> -->
                </view>
                <view class="my-points-userInfo-address">{{ address }}</view>
            </view>
            <view class="my-points-detail">
                <view class="my-points-detail-num">
                    <view class="detail-num">{{ myPoints }}</view>
                    <view class="detail-text">当前积分</view>
                </view>
                <view class="my-points-exchange" @tap="exchangeGift">积分商城</view>
            </view>
            <view class="rh-jf">
                <text class="edit-box" @tap="showRule">如何获取积分?</text>
            </view>
        </view>
        <!-- 积分明细 -->
        <view class="points-detailed">
            <view class="points-detailed-content">
                <view class="points-detailed-title">
                    <image src="../../static/assets/img/my/jifenduihuanicon.png" mode="widthFix"></image>
                    积分明细
                </view>
                <van-tabs :active="activeTab" @change="onChange" sticky color="#00BCAB">
                    <van-tab title="全部明细"></van-tab>
                    <van-tab title="获取明细"></van-tab>
                    <van-tab title="消耗明细"></van-tab>
                </van-tabs>
            </view>
        </view>
        <view class="scroll-list">
            <view class="points-detailed-content points-detailed-list" v-if="pointsList.length > 0">
                <view class="points-detailed-item" v-for="(item, index) in pointsList" :key="index">
                    <view class="points-detailed-item-left">
                        <view class="points-detailed-item-left-name">{{ item.integralDetails || '' }}</view>
                        <view class="points-detailed-item-left-time">{{ item.createTime }}</view>
                    </view>

                    <view class="points-detailed-item-right">
                        <view v-if="item.integralStatus == 0 && item.integralOperation" class="need-points need-points1">+{{ item.integralOperation }}</view>
                        <view v-if="item.integralStatus == 1 && item.integralOperation" class="need-points need-points2">-{{ item.integralOperation }}</view>
                    </view>
                </view>
            </view>

            <view class="no-data" v-else>
                <image src="../../static/assets/img/No-Data.png" mode="widthFix"></image>
                <view class="no-data-info">暂无数据</view>
            </view>
        </view>
        <van-popup round v-model="showRulePop" @close="closeRule">
            <view class="rules">
                <view class="rule-title">积分规则</view>
                <view>
                    <view class="rule-title2">什么是邻里停积分？</view>
                    <view class="rule-content">积分是邻里停用户通过日常打卡、分享车位、支付停车费等行为获得的累计积分值，积分可在积分商城兑换丰富的礼品或停车券。</view>
                </view>
                <view class="rh-jf-content">
                    <view class="rule-title2">如何获得积分？</view>
                    <view class="rule-content">获得积分的方式如下，规则会根据实际情况动态调整，最终解释权归邻里停所有。</view>
                    <view class="rule-content">每日签到:+10分</view>
                    <view class="rule-content">共享车位(新发布或者当天有车位上架状态):+80分/天</view>
                    <view class="rule-content">支付包月:+200分/笔</view>
                </view>
            </view>
            <view class="rule-know" @tap="closeRule">我知道了</view>
        </van-popup>
    </view>
</template>

<script>
// pages/myPoints/myPoints.js
const app = getApp();
import api from '../../utils/api.js';
import util from './../../utils/util.js';
export default {
    data() {
        return {
            showRulePop: false,
            statusBarHeight:0,
            activeTab: 0,
            userName: '',
            userType: '',
            address: '',
            myPoints: 0,
            pointsList: [],
            pageNumber: 1,
            totalPages: 1,
			uiStyle:1,
			weixin:uni.getStorageSync('weixin')
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		this.uiStyle = uni.getStorageSync('uiStyle')
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.setData({
            pageNumber: 1
        });
        this.getPoints();
        this.getPointsList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {
        if (this.pageNumber + 1 <= this.totalPages) {
            // 若不是最后一页，则将当前页数增加1，获取数据
            this.setData({
                pageNumber: this.pageNumber + 1
            });
            this.getPointsList();
        }
    },
    /**
     * 用户点击右上角分享
     */ methods: {
        onChange(event) {
            this.setData({
                activeTab: event,
                pointsList: [],
                pageNumber: 1
            });
            this.getPointsList(event);
        },

        exchangeGift() {
            uni.navigateTo({
                url: '/packageMy/myPointMall/myPointMall'
            });
        },

        goMy() {
            uni.navigateBack({
                delta: 1
            });
        },

        //展示积分规则
        showRule() {
            this.setData({
                showRulePop: true
            });
        },

        closeRule() {
            //关闭积分规则
            this.setData({
                showRulePop: false
            });
        },

        //获取当前积分
        getPoints() {
            this.initData();
            util.request(api.getMyIntegral,'get')
                .then((res) => {
                    if (res.code == 0) {
                        this.setData({
                            myPoints: res.data.currentIntegral || 0
                        });
                    } else {
                        // wx.showToast({ title: res.msg || '服务器出小差了', icon: "none" });
                    }
                })
                .catch((err) => {});
        },

        //获取用户积分明细
        getPointsList() {
            console.log('getPointsList');

            if (this.activeTab == 0) {
                var param = {
                    pageNo: this.pageNumber,
                    pageSize: 10
                };
            } else if (this.activeTab == 1) {
                var param = {
                    //获取明细
                    pageNo: this.pageNumber,
                    pageSize: 10,
                    integralStatus: 0 //任务属性,增加0,减少1(非必传)
                };
            } else if (this.activeTab == 2) {
                var param = {
                    //消耗明细
                    pageNo: this.pageNumber,
                    pageSize: 10,
                    integralStatus: 1 //任务属性,增加0,减少1(非必传)
                };
            }

            util.request(api.findUserIntegralDetail, param,'post')
                .then((res) => {
                    if (res.code == 0) {
                        let list = [];

                        if (this.pageNumber == 1) {
                            // 若请求第一页，则直接赋值
                            list = res.data.records;
                            this.setData({
                                totalPages: Math.ceil(res.data.total / 10)
                            });
                        } else {
                            // 否则将获取的数据与原数组合并
                            list = this.pointsList.concat(res.data.records);
                        }

                        this.setData({
                            pointsList: list
                        });
                    } else {
                        uni.showToast({
                            title: res.msg || '服务器出小差了',
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    this.setData({
                        pointsList: []
                    });
                });
        },

        initData() {
            this.setData({
                userName: uni.getStorageSync('name') || '',
                userType: uni.getStorageSync('roleName') || '',
                address: uni.getStorageSync('addressName') || ''
            });
        }
    }
};
</script>
<style>
@import './myPoints.css';
</style>
